<template>
  <div class="aaass">
    <el-form ref="form" class="condition" size="small" label-position="top">
      <el-form-item v-for="(item, index) in conditonList" :key="index">
        <div class="form-item">
          <el-select style="width: 130px;" class="filter-select" v-model="item.actionStatus" @change="filterTypeChange(item)">
            <el-option :value="one.key" :label="one.name" :key="one.key" v-for="one in conditonFilter"></el-option>
          </el-select>
          <selectField class="select-field" :item="item" :listMap="listMap" :fieldsList="fieldsList" @changeSelectField="changeSelectField(item)"></selectField>
          <template v-if="item.actionStatus === 3">
            <div class="set-text">设置为</div>
            <el-input v-if="!item.targetValue && !(item.fieldList && item.fieldList.fieldType)" v-model="item.targetValue" :disabled="true" style="flex: 1;"/>
            <fieldItem v-else :item="item" :field="listMap[item.fieldList.businessId]"></fieldItem>
          </template>
          <i class="V7_iconfont pointer V7_iconV7tubiao-109" @click.stop="delItem(index)"></i>
        </div>
      </el-form-item>
      </el-form>
    <el-dropdown
			@command="handleCommandOr"
			trigger="click">
			<el-button size="small" type="text" icon="el-icon-plus iconfont-left">添加动作</el-button>
			<el-dropdown-menu slot="dropdown" style="width: 288px" class="dropdown-menu__common">
					<el-dropdown-item
						v-for="(item, index) in conditonFilter"
						:key="index"
						class="ellipsis"
						:command="item"
					>{{item.name}}</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
import { conditonFilter, conditonFilter2 } from './updateFormUtils'
import selectField from './selectField.vue'
import fieldItem from './fieldItem.vue'
@Component({
  name: 'updateConditionForm',
  components: {
    selectField,
    fieldItem
  }
})
export default class extends Vue {
  @Prop(Array) public fieldsList!: any;
  @Prop(Array) public conditonList!: any;
  @Prop(Number) public type!: number;
  @Prop({ default: () => ({}) }) public listMap!: any;

  private get conditonFilter () {
    return this.type === 1 ? conditonFilter : conditonFilter2
  }

  public handleCommandOr (item) {
    this.conditonList.push({
      actionStatus: item.key,
      fieldList: [],
      targetValue: null
    });
  }

  private delItem (index) {
    this.conditonList.splice(index, 1)
  }

  public filterTypeChange (item) {
    console.log(item)
    item.fieldList = null
  }

  public changeSelectField (item) {
    item.targetValue = null
  }
}
</script>
<style scoped lang="stylus">
.form-item {
  display flex
  align-items: center
}
.filter-select {
  margin-right: 12px
}
.set-text {
  margin: 0px 12px
}
.V7_iconV7tubiao-109 {
  margin-left: 12px
  color: #B3B9C7
}
.select-field {
  flex: 1
}
</style>
